<div class="pl-train">
  <header class="header pl-3">
    <p class="mr-4" [ngClass]="{'active': traTabActiveIndex === 0}" (click)="traTabActiveIndex=0">培训内容设置</p>
    <p class="ml-4" [ngClass]="{'active': traTabActiveIndex === 1}" (click)="traTabActiveIndex=1">预览培训内容</p>
  </header>
  <div class="tab pl-5 pr-5">
    <p-tabView [activeIndex]="traTabActiveIndex">
      <p-tabPanel>
        <div class="ui-g setting">
          <!--课程内容-->
          <div class="ui-g-8 ui-md-8">
            <div class="header pt-2 pb-2">
              <div class="ui-inputgroup">
                <p-dropdown
                  [showClear]="true"
                  placeholder="请选择分类..."
                  [options]="trainClassifyOptions"
                  [(ngModel)]="trainClassifySelected"
                  (onChange)="trainOperate(trainOperateFlag = 'reset')"
                  optionLabel="contentCategoryName"
                  dropdownIcon="fa fa-caret-down">
                </p-dropdown>
                <button pButton type="button" label="搜索" (click)="trainOperate(trainOperateFlag = 'search')"></button>
              </div>
            </div>
            <div class="content" style="height: 52vh">
              <p-table
                [value]="trainTableData" [columns]="trainTableHeader"
                [scrollable]="true" scrollHeight="50vh"
              >
                <ng-template pTemplate="header" let-columns>
                  <tr>
                    <th>序号</th>
                    <th *ngFor="let col of columns">
                      {{col.header}}
                    </th>
                    <th>操作</th>
                  </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
                  <tr>
                    <td>{{rowIndex + 1}}</td>
                    <td *ngFor="let col of columns">
                      {{rowData[col.field]}}
                    </td>
                    <td class="text-center">
                      <button
                        *ngIf="rowData.active === 0"
                        pButton label="添加" class="ui-button-rounded mr-3"
                        (click)="trainOperate(trainOperateFlag='add',rowData, rowIndex)">
                      </button>
                      <button
                        *ngIf="rowData.active === 1"
                        pButton label="已添加" class="ui-button-rounded ui-button-outlinePrimary mr-3">
                      </button>
                    </td>
                  </tr>
                </ng-template>
              </p-table>
            </div>
            <div class="pagination mt-2">
              <app-pagination [option]="trainPageOption" (clickEvent)="trainPageEvent($event)"></app-pagination>
            </div>
          </div>
          <div class="ui-g-4 ui-md-4">
            <div class="header pt-2 pb-2" style="background-color: #F8F8F8;justify-content: center">
              <span>已添加的课程</span>
            </div>
            <div class="content pl-2 pr-2">
              <div class="list" *ngFor="let item of trainAddList;let i = index">
                <div class="left pt-2 pb-2">
                  <p>{{item?.resourceName}}</p>
                  <p class="text-gray">{{item?.resourceType}}</p>
                </div>
                <div class="right" (click)="trainOperate(trainOperateFlag='del', item, i)">
                  <i class="fa fa-trash-o h5 text-gray" aria-hidden="true"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </p-tabPanel>
      <p-tabPanel [cache]="false">
        <div class="ui-g train">
          <div class="files">
            <p class="h6 text-gray mb-3">培训资料</p>
            <a
              *ngFor="let item of trainAddFileList"
              [href]="item.resourcePath"
              class="list pt-2 pb-2 pl-3 mt-1"
              target="_blank">
              {{item.resourceName}}
            </a>
          </div>
          <div class="video mt-3">
            <p class="h6 text-gray mb-3">培训视频</p>
            <div class="ui-g-4 ui-md-4" *ngFor="let item of trainAddVideoList">
              <div class="p-2" style="border: 1px solid #EBECEF">
                <video style="width: 100%" height="200" controls="controls">
                  <source [src]="item?.resourcePath" type="video/mp4"/>
                </video>
                <div>
                  <span>{{item.resourceName}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="footer">
            <button
              pButton class="ui-button-rounded ui-button-pink mr-3"
              label="上一步"
              (click)="trainOperate(trainOperateFlag='previous')">
            </button>
            <button
              pButton class="ui-button-rounded"
              label="下一步"
              (click)="trainOperate(trainOperateFlag='next')">
            </button>
          </div>
        </div>
      </p-tabPanel>
    </p-tabView>
  </div>
</div>
